import React from 'react';
import createComponent from 'cxs-components';
import msgIcon from 'src/images/msg-icon.png';
import { Badge } from 'antd';
import styled from './index.less';

export const CustomDiv = createComponent('div')(({ aColor, aBorder = 'none', bBorder = 'none', isSelected }) => ({
  backgroundColor: isSelected ? aColor : 'transparent',
  border: isSelected ? aBorder : bBorder,
  ':hover': {
    backgroundColor: aColor,
    border: aBorder,
  },
}));

export default ({ title, content, dateTime, status = false, cardStyle, font }) => {
  const { notifTitle, notifContent } = font;
  const { bBorder, aBorder, aColor = 'transparent', ...style } = cardStyle;
  return (
    <Badge dot={!status}>
      <CustomDiv className={styled['custom-car-box']} aColor={aColor} bBorder={bBorder} aBorder={aBorder} style={style}>
        <div className={styled.title} style={notifTitle}>
          <div>
            <img src={msgIcon} alt="消息图标" style={{ width: '16px', height: '16px' }}></img>
          </div>
          <div className={styled.text} title={title}>
            {title}
          </div>
          {dateTime && <div className={styled['date-time']}>{dateTime}</div>}
        </div>
        <div className={styled.content} style={notifContent}>
          {content}
        </div>
      </CustomDiv>
    </Badge>
  );
};
